import React, { useState, useRef, useEffect } from 'react';
// import React from 'react'
import { connect } from 'react-redux'
import { Card, Input, Upload, message, Button, DatePicker, Space } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import style from "./style.module.css"
import { useHistory } from "react-router-dom"
import axios from "../../../utils/request"

const CreateLive = (props) => {
    const [createtime, settime] = useState('')
    const [createtimeUpload, settimeUpload] = useState('')
    //时间
    function onChange(data, dateString) {
        settime(dateString)
    }

    //输入框的值
    const history = useHistory()
    console.log(history)

    //标题
    const title = useRef()
    //名字
    const name = useRef()

    //点击马上直播
    const handleliveAway = () => {
        const titleIpt = title.current.state.value
        const nameIpt = name.current.state.value
        axios.post("/api/addlive", { titleIpt, nameIpt, createtime, createtimeUpload }).then(res => {
            if (res.code === 1) {
                message.info("添加成功")
                props.history.push("/layout/liveManage")
            } else {
                message.info('添加失败')
            }
        })
    }

    const propes = {
        name: 'file',
        action: '/api/getpinupload',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                // console.log(info.file, info.fileList);
                // console.log(info.fileList[0].response.url,'99');
                settimeUpload(info.fileList[0].response.url)
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };

    return (
        <div className='createLive'>
            <Card>
                <h3 className={style.h3list}>创建直播间</h3>
                <ul className={style.liveBox}>
                    <li>
                        <span>直播标题:</span>
                        <Input placeholder="请输入直播标题" ref={title} />
                    </li>
                    <li>
                        <span>直播名字:</span>
                        <Input placeholder="请输入直播标题" ref={name} />
                    </li>
                    <li>
                        <span>直播时间:</span>
                        <Space direction="vertical">
                            <DatePicker onChange={onChange} className={style.dataPick}/>
                        </Space>
                    </li>
                    <li>
                        <span>封面图片:</span>
                        <Upload {...propes}>
                            <Button icon={<UploadOutlined />}>上传图片</Button>
                        </Upload>
                    </li>
                </ul>
                <div className={style.btns}>
                    <Button type="primary" danger onClick={handleliveAway}>马上直播</Button>
                </div>
            </Card>
        </div>
    );
}

export default connect((state) => {
    return {

    }
})(CreateLive);
